<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="能源管理—能耗分项"></Header>

    <section class="search_bar">
      <!-- 1 -->
      <el-radio-group v-model="radio" @change="changeSelect1">
        <el-radio-button label="电"></el-radio-button>
        <el-radio-button label="水"></el-radio-button>
      </el-radio-group>
      <!-- 2 -->
      <LSelect label="对象选择" placeholder="请选择" style="margin:3px 0 0 30px;" :value="a" :options="option1"></LSelect>
      <!-- 3 -->
      <el-radio-group v-model="radio1" style="margin-left: 30px;" @change="changeSelect2">
        <el-radio-button label="日"></el-radio-button>
        <el-radio-button label="周"></el-radio-button>
        <el-radio-button label="月"></el-radio-button>
        <el-radio-button label="年"></el-radio-button>
        <el-radio-button label="自定义"></el-radio-button>
      </el-radio-group>
      <LDateTimeSelect3 label="选择时间" style="margin:3px 0 0 5px;" :value="t1" @subtime-event="getNewTime1" v-if="radio1 ==='日' "></LDateTimeSelect3>
      <LDateTimeSelect2 label="选择时间" style="margin:3px 0 0 5px;" :value="t2" @time-event="getNewTime2" v-else-if="radio1 ==='周' "></LDateTimeSelect2>
      <LDateTimeSelect4 label="选择时间" style="margin:3px 0 0 5px;" :value="t3" @month-event="getNewTime3" v-else-if="radio1 ==='月'"></LDateTimeSelect4>
      <LDateTimeSelect5 label="选择时间" style="margin:3px 0 0 5px;" :value="t4" @year-event="getNewTime4" v-else-if="radio1 ==='年'"></LDateTimeSelect5>
      <LDateTimeSelect2 label="选择时间" style="margin:3px 0 0 5px;" :value="t5" @time-event="getNewTime5" v-else></LDateTimeSelect2>
      <!-- 5 -->
      <LButton label="查询" style="margin:0px 0 0 30px;"></LButton>
      <!-- 6 -->
      <!-- <img src="../../../assets/img/export.png" alt="" title="导出"> -->
    </section>

    <section class="container">
      <div class="box">
        <div class="chart">
          <!-- <div class="btns">
            <img src="../../../assets/img/矢量智能对象.png" alt="" />
            <img src="../../../assets/img/矢量智能对象3.png" alt="" />
            <img src="../../../assets/img/矢量智能对象4.png" alt="" />
          </div> -->
          <div class="chart_box" ref="lineChart"></div>
        </div>
        <div class="content">
          <span class="content_title">本级电耗:<span>1832.93</span> kwh</span>
          <div class="content_box">
            <!-- <table>
              <tr>
                <th>分项名称</th>
                <th>总量</th>
                <th>占比（%）</th>
              </tr>
              <el-scrollbar>
                <tr v-for="(item, index) in tableData1" :key="index">
                  <td>{{ item.project }}</td>
                  <td>{{ item.number }}</td>
                  <td>{{ item.unit }}</td>
                </tr>
              </el-scrollbar>
            </table> -->
            <el-scrollbar>
              <el-table :data="tableData" style="width: 100%" :default-sort="{prop:'',order:ascending}" border>
                <el-table-column type="expand">
                  <template #default>
                    <div style="padding:2vh">
                      <el-table :data="tableData2" style="width: 100%" :default-sort="{prop:'',order:ascending}" border>
                        <el-table-column label="二级分项" prop="a" />
                        <el-table-column label="总量" prop="b" />
                        <el-table-column label="占比(%)" prop="c" />
                      </el-table>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="一级分项" prop="a" />
                <el-table-column label="总量" prop="b" />
                <el-table-column label="占比(%)" prop="c" />
              </el-table>
            </el-scrollbar>

          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import moment from "moment";
import * as echarts from "echarts";
import Header from "@/components/Header";
import LSelect3 from "@/components/LSelect3.vue";
import LDateTimeSelect3 from "@/components/LDateTimeSelect3.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LDateTimeSelect4 from "@/components/LDateTimeSelect4.vue";
import LDateTimeSelect5 from "@/components/LDateTimeSelect5.vue";
import LButton from "@/components/LButton.vue";
import Ctwo from "@/components/Ctwo";
import LSelect from "@/components/LSelect.vue";

export default {
  components: {
    Header,
    LSelect3,
    LDateTimeSelect3,
    LDateTimeSelect2,
    LDateTimeSelect4,
    LDateTimeSelect5,
    LButton,
    Ctwo,
    LSelect,
  },
  data() {
    return {
      radio: "电",
      radio1: "日",
      a: "",
      t1: new Date(),
      t2: null,
      t3: null,
      t4: null,
      t5: null,
      value: 1,
      option1: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
      tableData2: [
        {
          a: "照明与插座用电 ",
          b: "907.59",
          c: "26.43%",
        },
        {
          a: "空调用电  ",
          b: "907.59",
          c: "26.43%",
        },
        {
          a: "动力用电 ",
          b: "907.59",
          c: "26.43%",
        },
        {
          a: "特殊用电 ",
          b: "907.59",
          c: "26.43%",
        },
        {
          a: "其他用电 ",
          b: "907.59",
          c: "26.43%",
        },
      ],

      tableData: [
        {
          a: "照明与插座用电 ",
          b: "907.59",
          c: "26.43%",
        },
        {
          a: "空调用电  ",
          b: "907.59",
          c: "26.43%",
        },
        {
          a: "动力用电 ",
          b: "907.59",
          c: "26.43%",
        },
        {
          a: "特殊用电 ",
          b: "907.59",
          c: "26.43%",
        },
        {
          a: "其他用电 ",
          b: "907.59",
          c: "26.43%",
        },
      ],
      tableData1: [
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
      ],

      color: [
        "rgba(22, 172, 142, 1)",
        "rgba(0, 251, 183, 1)",
        "rgba(248, 136, 42, 1)",
        "rgba(20, 218, 255, 1)",
        "rgba(6, 232, 219, 1)",
        "rgba(22, 172, 142, 1)",
        "rgba(0, 251, 183, 1)",
        "rgba(248, 136, 42, 1)",
        "rgba(20, 218, 255, 1)",
        "rgba(6, 232, 219, 1)",
      ].reverse(),
      angle: 0,

      chartInstance: null,
    };
  },

  computed: {
    defaultOption() {
      // return {
      //   title: {
      //     text: '{a|' + 15870 + '} \n {c|总电耗（kwh）}',
      //     x: 'center',
      //     y: 'center',
      //     textStyle: {
      //       rich: {
      //         a: {
      //           fontSize: 46,
      //           color: '#FFFFFF'
      //         },

      //         c: {
      //           fontSize: 24,
      //           color: '#6392D3',
      //           // padding: [5,0],
      //           marginTop: 24
      //         }
      //       }
      //     }
      //   },
      //   legend: {
      //     bottom: 80,
      //     left: 'center',
      //     orient: 'vertical',
      //     textStyle: {
      //       color: '#6392D3'
      //     }
      //     // data: [{
      //     //   name: 'pie',
      //     //   data: [0, 1, 2, 3, 4]
      //     // }]
      //   },
      //   tooltip: {
      //     show: false
      //   },
      //   series: [{
      //     type: 'pie',
      //     name: '最内层径向渐变圆心',
      //     clockWise: false,
      //     radius: '42%',
      //     center: ['50%', '50%'],
      //     z: 1,
      //     itemStyle: {
      //       normal: {
      //         color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.6, [{
      //           offset: 1,
      //           color: 'RGBA(97, 144, 208, 0.5)'
      //         },
      //         {
      //           offset: 0.6,
      //           color: 'RGBA(97, 144, 208, 0)'
      //         }
      //         ], false)
      //       }
      //     },
      //     hoverAnimation: false,
      //     label: {
      //       show: false
      //     },
      //     tooltip: {
      //       show: false
      //     },
      //     data: [100]
      //   },
      //   {
      //     type: 'pie',
      //     name: '内层细圆环1',
      //     radius: ['46%', '46%'],
      //     hoverAnimation: false,
      //     clockWise: false,
      //     itemStyle: {
      //       normal: {
      //         borderColor: 'RGBA(4, 156, 212, 1)',
      //         borderWidth: 1,
      //         borderType: [50, 80]
      //       }
      //     },
      //     label: {
      //       show: false
      //     },
      //     data: [100]
      //   },
      //   {
      //     type: 'pie',
      //     name: '内层细圆环2',
      //     radius: ['42%', '42%'],
      //     hoverAnimation: false,
      //     clockWise: false,
      //     itemStyle: {
      //       normal: {
      //         borderColor: 'RGBA(89, 133, 196, 1)',
      //         borderWidth: 1
      //       }
      //     },
      //     label: {
      //       show: false
      //     },
      //     data: [100]
      //   },
      //   {
      //     type: 'pie',
      //     name: '最外层细圆环',
      //     hoverAnimation: false,
      //     clockWise: false,
      //     radius: ['60%', '60%'],
      //     itemStyle: {
      //       normal: {
      //         borderColor: 'RGBA(66, 98, 150, 1)',
      //         borderWidth: 1,
      //         borderType: [5, 10],
      //         borderDashOffset: 5
      //       }
      //     },
      //     label: {
      //       show: false
      //     },
      //     data: [100]
      //   },
      //   {
      //     name: '饼图内容区',
      //     type: 'pie',
      //     clockWise: false,
      //     radius: ['50%', '56%'],
      //     hoverAnimation: false,
      //     data: this.datas,
      //     label: {
      //       show: false
      //     }
      //   }
      //   ]
      // }

      return {
        title: {
          text: "{a|" + 15870 + "} \n {c|总电耗（kwh）}",
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: 46,
                color: "#FFFFFF",
              },

              c: {
                fontSize: 24,
                color: "#6392D3",
                // padding: [5,0],
                marginTop: 24,
              },
            },
          },
        },

        legend: {
          bottom: 10,
          left: "center",
          orient: "vertical",
          textStyle: {
            color: "#6392D3",
          },
          // data: [{
          //   name: 'pie',
          //   data: [0, 1, 2, 3, 4]
          // }]
        },

        animation: false,

        series: [
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                  startAngle: ((0 + this.angle) * Math.PI) / 180,
                  endAngle: ((90 + this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#8383FA",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", // 紫点
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
              const point = this.getCirlPoint(x0, y0, r, 90 + this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#8450F9", // 绿
                  fill: "#8450F9",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                  startAngle: ((180 + this.angle) * Math.PI) / 180,
                  endAngle: ((270 + this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#4386FA",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", // 蓝色
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
              const point = this.getCirlPoint(x0, y0, r, 180 + this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#4386FA", // 绿
                  fill: "#4386FA",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                  startAngle: ((270 + -this.angle) * Math.PI) / 180,
                  endAngle: ((40 + -this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                  startAngle: ((90 + -this.angle) * Math.PI) / 180,
                  endAngle: ((220 + -this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#FF8E89",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
              const point = this.getCirlPoint(x0, y0, r, 90 + -this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#FF8E89", // 粉
                  fill: "#FF8E89",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", // 绿点
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
              const point = this.getCirlPoint(x0, y0, r, 270 + -this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#0CD3DB", // 绿
                  fill: "#0CD3DB",
                },
                silent: true,
              };
            },
            data: [0],
          },
          // {
          //   name: "pie",
          //   type: "pie",
          //   clockWise: false,
          //   // radius: [40, 32],
          //   radius: ["40%", "35%"],
          //   hoverAnimation: false,
          //   itemStyle: {
          //     normal: {
          //       borderColor: "#0A1934",
          //       borderWidth: 5,
          //       color: (params) => {
          //         return this.color[params.dataIndex];
          //       },
          //     },
          //   },
          //   label: {
          //     show: false,
          //   },
          //   labelLine: {
          //     show: false,
          //   },
          //   data: this.realData,
          // },
          // {
          //   type: "pie",
          //   zlevel: 3,
          //   hoverAnimation: false,
          //   radius: ["45%", "50%"],
          //   clockWise: false,
          //   labelLine: {
          //     show: false,
          //   },
          //   label: {
          //     show: false,
          //   },
          //   data: this.datas,
          // },
        ],
      };
    },

    datas() {
      const result = [];
      for (let index = 0; index < 5; index++) {
        result.push(
          {
            data: 10,
            value: 15,
            name: index,
            itemStyle: {
              normal: {
                color: this.color[index],
                // borderWidth: 10,
                // borderColor: colorBorder[i]
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      return result;
    },

    realData() {
      const result = [100];
      for (let index = 6; index < 10; index++) {
        result.push(
          {
            name: index,
            data: 10,
            value: 1,
            itemStyle: {
              normal: {
                color: this.color[index],
              },
            },
          },
          {
            value: 45,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      return result;
    },
  },

  mounted() {
    this.chartInstance = this.$root.echarts.init(this.$refs.lineChart);

    const option = this.defaultOption;
    this.chartInstance.setOption(option);

    let timerId = null;
    if (timerId) {
      clearInterval(timerId);
    }
    timerId = setInterval(() => {
      this.draw();
    }, 100);
  },

  methods: {
    getNewTime1(t) {
      console.log("t1+++", t);
      this.t1 = t;
    },
    getNewTime2(t) {
      console.log("t2+++", t);
      this.t2 = t;
    },
    getNewTime3(t) {
      console.log("t3+++", t);
      this.t3 = t;
    },
    getNewTime4(t) {
      console.log("t4+++", t);
      this.t4 = t;
    },
    getNewTime5(t) {
      console.log("t5+++", t);
      this.t5 = t;
    },
    changeSelect1(val) {
      this.radio = val;
      console.log("this.radio:", this.radio);
    },
    changeSelect2(val) {
      this.radio1 = val;
      console.log("this.radio1:", this.radio1);
      switch (this.radio1) {
        case "日":
          this.t1 = new Date();
          return;
        case "周":
          let a = new Date();
          let b = a.setDate(a.getDate() - 6);
          this.t2 = [new Date(b), new Date()];
          return;
        case "月":
          this.t3 = new Date();
          return;
        case "年":
          this.t4 = new Date();
          return;
        case "自定义":
          this.t5 = [];
          return;
      }
      console.log("选项卡片", this.t1);
      console.log("选项卡片", this.t2);
      console.log("选项卡片", this.t3);
      console.log("选项卡片", this.t4);
      console.log("选项卡片", this.t5);
    },
    getCirlPoint(x0, y0, r, angle) {
      const x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
      const y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
      return {
        x: x1,
        y: y1,
      };
    },
    draw() {
      this.angle = this.angle + 3;
      this.chartInstance.setOption(this.defaultOption, true);
      // window.requestAnimationFrame(draw);
    },
  },
  beforeUnmount() {},
};
</script>
<style lang="less" scoped>
@import "../../OperaManage/opera.less";

.bg {
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .search_bar {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
  }

  .title_bar {
    width: max-content;
    height: 46px;
    background-image: url("../../../assets/img/组 1.png");
    background-size: 100% 100%;
    padding: 0 80px 13px 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin-top: 16px;

    span {
      font-size: 15px;
      font-weight: 400;
      color: #b8f9ff;
    }

    .name {
      margin-left: 16px;

      &:first-child {
        margin-left: 0;
      }
    }

    .date {
      font-size: 15px;
      font-weight: 400;
      color: #72aeff;
      margin-left: 16px;
    }
  }

  .container {
    flex: 1;
    display: flex;
    padding-bottom: 20px;
    box-sizing: border-box;
    overflow: hidden;

    .box {
      flex: 1;
      background: url("../../../assets/img/2 拷贝 4.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-top: 20px;
      display: flex;
      align-items: center;
      padding: 20px 15px;
      box-sizing: border-box;
      overflow: hidden;

      .chart {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;

        .btns {
          width: 100%;
          height: 32px;
          display: flex;
          align-items: center;

          img {
            width: 17px;
            height: 17px;
            margin-left: 24px;
            cursor: pointer;
          }
        }

        .chart_box {
          width: 100%;
          flex: 1;
        }
      }

      .content {
        width: 795px;
        height: 100%;
        margin-left: 20px;
        display: flex;
        flex-direction: column;

        .content_title {
          width: 100%;
          height: 60px;
          flex-shrink: 0;
          display: flex;
          align-items: baseline;
          font-size: 15px;
          font-weight: 400;
          color: #567db6;

          span {
            margin: 0 4px;
            font-size: 32px;
            font-weight: bold;
            color: #ffffff;
          }
        }

        .content_box {
          flex: 1;
          background: rgba(93, 113, 212, 0.05);
          overflow: hidden;

          table {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

            tr {
              min-height: 50px;
              height: 50px;
              display: flex;
              align-items: center;

              &:nth-child(even) {
                background: rgba(93, 113, 212, 0.05);
              }

              &:nth-child(odd) {
                background: rgba(93, 113, 212, 0.1);
              }

              th {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                font-weight: 400;
                color: #6392d3;
              }

              td {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                font-weight: 400;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}

/deep/ .el-radio-button__inner {
  border: none;
}

/deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-left: none;
}

/deep/ .el-table {
  --el-table-border-color: rgba(225, 225, 225, 0.1) !important; //表格线
}
</style>
